<template>
  <a-layout-sider width="200" style="background: #fff">
    <a-menu
      mode="inline"
      :defaultOpenKeys="openKeys"
      :selected-keys="defaultKeys"
      :style="{ height: '100%', borderRight: 0 }"
      @click="clickMenuItem"
    >
      <a-menu-item v-for="i in menu" :key="i.path">
        <a-icon :type="i.icon || 'mail'" />
        {{ i.name }}
      </a-menu-item>
      <a-sub-menu
        v-for="f in subMenu.filter((item) => !!item.data.length)"
        :key="f.id"
      >
        <span slot="title"
          ><a-icon :type="f.icon" /><span>{{ f.name }}</span></span
        >
        <a-menu-item v-for="s in f.data" :key="s.path">
          {{ s.name }}
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>

<script>
import { routeSet, nav } from "assets/data/nav.js";
export default {
  data() {
    return {
      subMenu: [
        {
          id: "user",
          name: "系统用户管理",
          data: [],
          icon: "calendar",
        },
        {
          id: "teacher",
          name: "教师业绩管理",
          data: [],
          icon: "appstore",
        },
        {
          id: "base",
          name: "实习基地管理",
          data: [],
          icon: "carry-out",
        },
        {
          id: "project",
          name: "学生项目管理",
          data: [],
          icon: "experiment",
        },
        {
          id: "game",
          name: "学生竞赛管理",
          data: [],
          icon: "gift",
        },
      ],
      menu: [],
    };
  },
  created() {
    this.createNavList();
    // this.changePath(this.defaultPath());
  },
  watch: {
    $route(to, from) {
      if (to.path === "/login") {
        this.subMenu.forEach((item) => {
          item.data = [];
        });
      }
    },
  },
  methods: {
    //生成导航列表
    createNavList() {
      //获取权限表
      let power = this.$store.getters.getPower;
      power.forEach((item) => {
        if (nav.hasOwnProperty(item)) {
          this.subMenu[nav[item]].data.push(routeSet[item]);
        } else {
          this.menu.push(routeSet[item]);
        }
      });
    },

    //设置默认页面
    defaultPath() {
      if (!!this.subMenu.length) {
        return this.subMenu[0].data[0].path;
      }
      return this.menu[0].path;
    },

    clickMenuItem(res) {
      let path = this.$route.path;
      if (res.key !== path) {
        this.changePath(res.key);
      }
    },

    //跳转页面
    changePath(path) {
      this.$router.replace({ path });
    },
  },

  computed: {
    openKeys() {
      let nowPath = this.$route.path;
      let key = this.subMenu.find((item) => {
        if (item.data.findIndex((nope) => nope.path === nowPath) >= 0) {
          return true;
        }
      });
      return [key ? key.id : ""];
    },

    defaultKeys() {
      return [this.$route.path];
    },
  },
};
</script>

<style>
</style>